﻿<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
	//response.sendRedirect("common/login");
%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>金融机构_湖南省金融服务平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;" />
<link href="${path }/resource/css/finance/style.css" rel="stylesheet"
	media="screen" />
<link href="${path }/resource/css/finance/common.css" rel="stylesheet" />
<link href="${path }/resource/css/finance/page.css" rel="stylesheet" />
<link href="${path }/resource/css/finance/other.css" rel="stylesheet" />
<script type="text/javascript"
	src="${path }/resource/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${path}/resource/js/echarts.js"></script>
<!--[if IE 6]>
        <script type="text/javascript" src="/Script/DD_belatedPNG_0.0.8a-min.js"></script>
        <script type="text/yjavascript" src="/Script/ie6Fixpng.js"></script>
    <![endif]-->
<style type="text/css">
.subjg {
	background: url(/images/icon-dian02.jpg) 10px 10px no-repeat;
	padding-left: 20px;
}

.radio-list label {
	display: inline-block;
	float: left;
	height: 34px;
	margin-right: 22px;
	overflow: hidden;
	width: 110px;
}
</style>
<script type="text/javascript">
	$(function() {
		$('.radios').each(function(t, v) {
			$(v.childNodes).each(function(i, s) {
				if (s.type == "checkbox")
					s.title = s.value;
				else
					s.title = s.innerText;
			});
		});
	});
	function CheckSubmit() {
		if ($.trim($("#tbName").val()) == ""
				|| $.trim($("#tbName").val()) == "关键字") {
			$("#tbName").focus();
			alert("金融机构关键字不能为空！");
			return false;
		}
		return true;
	}
</script>
</head>
<body>
	<div class="wrap">

		<div class="head">


			<div class="top_r">
				<p>
					<span id="Head_lbLogin"></span><a href="login">工作人员登录</a>
				</p>
			</div>
			<div class="clear"></div>
		</div>
		<div id="gNavi">
			<ul class="clearfix" id="dvGuider">
				<li class="on"><a href="#">网站首页</a></li>
				<li><a href="#">金融动态</a></li>
				<li><a href="#">项目信息</a></li>
				<li><a href="FinanceOrgHome">资金信息</a></li>
				<li><a href="#">专家信息</a></li>
				<li><a href="#">成果信息</a></li>
				<li><a href="#">招聘信息</a></li>
				<li><a href="#">行情中心</a></li>
			</ul>
		</div>
		<script type="text/javascript">
			var pn = document.location.href;
			var as = document.getElementById('dvGuider').getElementsByTagName(
					'a'), find = false;
			for (var i = 0, j = as.length; i < j; i++)
				if (as[i].href.indexOf(pn) != -1) {
					as[i].parentElement.className = 'on';
					find = true;
					break;
				} else {
					as[i].parentElement.className = "";
					find = true;
				}
			//if (!find) as[0].className = 'focus';//如果未找到匹配的，需要设置哪个获取焦点可以修改这句
		</script>
		<div class="main">
			<div class="fl brand mt18">
				<p>您所在的位置：</p>
				<a href="/">首页</a><span>-</span><a href="/Finance/List.aspx">金融机构</a><span>-</span><a>全部</a>
			</div>
			<div class="content">
			<div><c:forEach items="${List}" var="list">
			${list.area}${list.number }
			</c:forEach></div>
			 <%--  <input type="hidden" value="<%=request.getAttribute("List")%>" id="aaa"/> --%>
				<div id="main" style="width: 480px; height: 400px; float: left;"></div>
				<div id="bot" style="width: 480px; height: 400px; float: left;"></div>
				<div id="bot2" style="width: 480px; height: 400px; float: left;"></div>
				<script type="text/javascript">
					// 基于准备好的dom，初始化echarts实例
					var res = [];
					var borcAxis=[];
					var borc=[];
					<c:forEach items="${List}" var="list">
					borcAxis.push('${list.area}');
					borc.push('${list.number}');
					res.push({
						name : '${list.area}',
						value : '${list.number}'
					});
					</c:forEach>
					var myChart = echarts.init(document.getElementById('main'));
					/* var list = document.getElementById('aaa').value; */
				/* 	alert(borc[0]); */
					// 指定图表的配置项和数据
					myChart.setOption({
						title : {
							text : '金融机构根据地域占比分析'
						},
						tooltip : {
							trigger : 'item',
							formatter : "{a} <br/>{b} : {c} ({d}%)"
						},
						toolbox : {
							show : true,
							feature : {
								mark : {
									show : true
								},
								dataView : {
									show : true,
									readOnly : false
								},
								restore : {
									show : true
								},
								saveAsImage : {
									show : true
								}
							}
						},
						calculable : true,
						series : [ {
							name : '数量',
							type : 'pie',
							radius : '55%',
							center : [ '50%', '50%' ],
							data : res
						} ]
					});
					var Chart = echarts.init(document.getElementById('bot'));
					/* var dataAxis = [ '点', '击', '柱', '子', '或', '者', '两', '指',
							'在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动',
							'缩', '放' ]; */
					 var data = [ 220, 182, 191, 234, 290, 330, 310, 123, 442,
							321, 90, 149, 210, 122, 133, 334, 198, 123, 125,
							220 ]; 
					/* var dataShadow = []; */
					var zoomSize = 6;
					//var yMax = 16;
					//var max=FindMaxMethod(borc,  borc.length, 0, 0);
					//yMax=max%3==0?max:max+3-(max%3);
					//for (var i = 0; i < data.length; i++) {
					//	dataShadow.push(yMax);
					//}
					Chart.setOption({
						title : {
							text : '金融机构数量分析',
							subtext : 'Feature Sample: Gradient Color, Shadow, Click Zoom'
						},
						 color: ['#3398DB'],
						    tooltip : {
						        trigger: 'axis',
						        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						        }
						    },
						    grid: {
						        left: '3%',
						        right: '4%',
						        bottom: '3%',
						        containLabel: true
						    },
						xAxis : {
							data : borcAxis,
							 type : 'category',
							axisLabel : {
								inside : true,
								textStyle : {
									color : '#fff'
								}
							},
							axisTick : {
								show : false,
								alignWithLabel: true
							},
							axisLine : {
								show : false
							},
							z : 10
						},
						yAxis : {
							axisLine : {
								show : false
							},
							axisTick : {
								show : false
							},
							axisLabel : {
								textStyle : {
									color : '#999'
								}
							}
						},
						dataZoom : [ {
							type : 'inside'
						} ],
						series : [
								{
									type : 'bar',
									name:'数量',
									barWidth: '60%',
									itemStyle : {
										normal : {
											color : new echarts.graphic.LinearGradient(0,
													0, 0, 1, 
													[{
														offset : 0,
														color : '#83bff6'
													}, {
														offset : 0.5,
														color : '#188df0'
													}, {
														offset : 1,
														color : '#188df0'
													} ])
										},
										emphasis : {
											color : new echarts.graphic.LinearGradient(0,
													0, 0, 1, [ {
														offset : 0,
														color : '#2378f7'
													}, {
														offset : 0.7,
														color : '#2378f7'
													}, {
														offset : 1,
														color : '#83bff6'
													} ])
										}
									},
									data : borc
								} ]
					});
					var zoomSize = 6;
					myChart.on('click',function(params) {
						window.location.href = "${path}/common/FinanceOrgHome?area="+params.name;
					});
					Chart.on('click',function(params) {
								console.log(borcAxis[Math.max(params.dataIndex - zoomSize
										/ 2, 0)]);
								Chart.dispatchAction({
									type : 'dataZoom',
									startValue : borcAxis[Math.max(params.dataIndex
											- zoomSize / 2, 0)],
									endValue : borcAxis[Math.min(params.dataIndex
											+ zoomSize / 2, borc.length - 1)]
								});
							});
					function FindMaxMethod(pArr, nStart, nEnd, nMax)  
					{  
						  //alert("nstart"+nStart+","+nEnd+","+nMax);
						if (nEnd - nStart <= 1)  
					    {
							var ns=pArr[nStart];
							var ne=pArr[nEnd];
							console.log("ns"+ns+"<ne"+ne);
					        if (parseInt(ns)>parseInt(ne))  
					        {
					        	console.log("<<");
					            nMax = ns;  
					        }  
					        else  
					        {  
					        	console.log(">>==");
					            nMax =ne;  
					        }  
					        //alert(nStart+","+nEnd+","+nMax);
					        return nMax;
					    }
					    var nLeftMax = 0;  
					    var nRightMax = 0;
					    nLeftMax=FindMaxMethod(pArr, nStart, Math.floor(nStart+(nEnd-nStart)/2), nLeftMax);  
					    console.log("nLeftMax"+nLeftMax);
					    nRightMax=FindMaxMethod(pArr, Math.floor(nStart+(nEnd-nStart)/2+1), nEnd, nRightMax);  
					    console.log("nRightMax"+nRightMax);
					    nMax = parseInt(nLeftMax) > parseInt(nRightMax) ? nLeftMax : nRightMax;
					    console.log("nMax"+nMax);
					    return nMax;
					}  
					
					var myChart1 = echarts.init(document.getElementById('bot2'));
					var name='hunan';
					var max=FindMaxMethod(borc, 0, borc.length-1, 0);
					$.get('${path }/resource/js/' + name + '.json', function (geoJson) {
						myChart1.hideLoading();
					    echarts.registerMap('hunan', geoJson);
					    myChart1.setOption(option = {
					        title: {
					            text: '湖南各市金融企业分布',
					            subtext: '最新数据',
					            sublink: 'localhost'
					        },
					        tooltip: {
					            trigger: 'item',
					            formatter: '{b}<br/>{c} (家)'
					        },
					        toolbox: {
					            show: true,
					            orient: 'vertical',
					            left: 'right',
					            top: 'center',
					            feature: {
					                dataView: {readOnly: false},
					                restore: {},
					                saveAsImage: {}
					            }
					        },
					        visualMap: {
					            min: 0,//最小最大
					            max: max,
					            text:['High','Low'],
					            realtime: false,
					            calculable: true,
					            inRange: {
					                color: ['lightskyblue','yellow', 'orangered']
					            }
					        },
					        series: [
					            {
					                name: '湖南各市分布',
					                type: 'map',
					                mapType: 'hunan', // 自定义扩展图表类型
					                itemStyle:{
					                    normal:{label:{show:true}},
					                    emphasis:{label:{show:true}}
					                },
					                data:res,
					                nameMap: {
					                    '湘西土家族苗族自治州': '湘西自治州',
					                }
					               
					            }
					        ]
					    });
					});
					
					
				</script>
			</div>
		</div>

		<!-- <div class="footer" style="padding-top: 10px; width: 1000px">
			<p>承办单位：湖南省人民政府金融工作办公室信息中心 Copyright 2014 All Rights Reserved.</p>
			<p>地址：湖南省长沙市五一大道351号（省政府机关二院八办公楼）</p>
		</div> -->
	</div>
</body>
</html>
